<template>
  <div class="app-container">
    <div style="display: flex;flex-flow: row nowrap;margin-left: 9%">
      <div style="border:1px;background-color: #4e8dff; width: 6px;height: 20px"></div>
      <span style="margin-left: 10px">基本信息</span>
    </div>
    <el-form v-loading="formLoading" ref="baseForm" :model="baseForm" :rules="baseFormRules" label-width="140px"
             style="margin-left: 25%;">
      <el-row>
        <el-col :span="16">
          <el-form-item label="活动标题" prop="title">
            <el-input v-emoji v-model="baseForm.title" placeholder="请输入活动标题"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="活动内容" prop="contents">
            <editor v-model="baseForm.contents" :min-height="192"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="附件" prop="attachFile">
            <file-upload v-model="baseForm.attachFile"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="活动层级" prop="levels">
            <el-select
              v-model="baseForm.levels"
              placeholder="请选择活动层级"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.activity_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="活动单位" prop="unit">
            <el-input v-emoji v-model="baseForm.unit" placeholder="请输入活动单位"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="活动描述" prop="describe">
            <el-input v-emoji v-model="baseForm.describe" placeholder="请输入活动描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <common-form ref="taskRef" ruleTitle="奖励规则" receiveTitle="参与人设置" labelName="参与人员" :ruleType="3" :isUpdate="isUpdate"
                 :examineId="examineId" :useTreeAll="true"></common-form>
    <!--    提交审核流转记录-->
    <appr-records v-if="examineId" ref="apprRecordsRef" :examineId="examineId"></appr-records>
    <div style="margin: 2% auto auto 40%;">
      <el-button class="form_button_item" @click="closeBtnHandler">取消</el-button>
      <el-button class="form_button_item" :loading="saveBtnLoading" type="primary" @click="submitForm">发布
      </el-button>
    </div>
  </div>
</template>

<script>
import commonForm from "@/views/examine/commonForm";
import apprRecords from "@/views/examine/apprRecords"
import {addActive, getActive, updateActive} from "@/api/examine/active/api";

export default {
  name: "Add",
  dicts: [
    "activity_level",
  ],
  components: {
    commonForm,
    apprRecords
  },
  data() {
    return {
      datePickerValid: {
        disabledDate(time) {
          return time.getTime() <= new Date().getTime() - 8.64e7;
        }
      },
      title: "",
      cycleVal: '',
      deptName: '',
      isUpdate: false,
      rulesData: {},
      receiveData: {},
      formLoading: false,
      saveBtnLoading: false,
      // 表单参数
      baseForm: {},
      examineId: '',
      // 表单校验
      baseFormRules: {
        title: [
          {required: true, message: "请填写活动标题", trigger: "blur"}
        ],
        contents: [
          {required: true, message: "请填写活动内容", trigger: "blur"}
        ]
      },
      examineYearOptions: {
        disabledDate: (time) => {
          const date = new Date()
          const year = date.getFullYear()
          const timeYear = time.getFullYear()
          return year > timeYear + 3
        }
      }
    }
  },
  created() {
    this.initPage();
  },
  methods: {
    initPage() {
      this.reset()
      this.examineId = this.$route.query.id;
      if (this.examineId) {
        this.isUpdate = true;
        this.formLoading = true
        getActive(this.examineId).then(resp => {
          this.baseForm.id = this.examineId
          this.baseForm = resp.data
        }).finally(() => {
          this.formLoading = false
        })
      }
    },
    submitForm() {
      Promise.all([this.$refs.taskRef.getCommonForm(), this.$refs["baseForm"].validate()]).then(resp => {
        this.saveBtnLoading = true;
        Object.assign(this.baseForm, resp[0])
        if (this.baseForm.id != null) {
          updateActive(this.baseForm).then(response => {
            this.$modal.msgSuccess("修改成功");
            // 清空页签缓存
            this.$tab.clearKeepAlivePage('EvaluateTable')
            this.closeBtnHandler();
          }).finally(() => {
            this.saveBtnLoading = false;
          })
        } else {
          addActive(this.baseForm).then(response => {
            this.$modal.msgSuccess("保存成功");
            // 清空页签缓存
            this.$tab.clearKeepAlivePage('EvaluateTable')
            this.closeBtnHandler();
          }).finally(() => {
            this.saveBtnLoading = false;
          })
        }
      })
    },
    closeBtnHandler() {
      this.reset()
      // 关闭当前页面
      this.$tab.closeOpenPage();
      // 刷新列表页面
      this.$tab.refreshPage({path: "/active/evaluateTable"});
    },
    // 表单重置
    reset() {
      this.baseForm = {
        title: undefined,
        contents: undefined,
        attachFile: undefined,
        trainingTime: undefined,
        trainingPlace: undefined
      };
      this.resetForm("baseForm");
    }
  }
}
</script>

<style scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #606266;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  color: #606266;
}

::v-deep .el-radio__input.is-disabled + span.el-radio__label {
  background-color: #fff;
  color: #606266;
}
</style>
